<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>

  <body>
    <div class="box">
      <h2>标题</h2>
      <div class="container">
        <p>段落1, <span class="keyword">张三</span> 是大一学生</p>
        <p>段落2, <span class="keyword">李四</span> 是大二学生</p>

        <div class="article">
          <h3 id="title">小标题</h3>
          <p>失败是成功之母</p>
        </div>
      </div>
    </div>

    <script>
      // 一. 通过导航获取（嵌套层级太深 获取不方便）
      // // 1.拿到body
      // var bodyEl = document.body
      // // 2.拿到box
      // var boxEl = bodyEl.firstElementChild
      // // 3.拿container
      // var containerEl = boxEl.children[1]
      // // 4.拿p
      // var pEl = containerEl.children[0]
      // // 5.拿到keyword
      // var spanEl = pEl.children[0]
      // spanEl.style.color = "red"

      // 二. getElementBy*
      // 1.通过className获取元素
      // var keywordEls = document.getElementsByClassName("keyword")
      // // 修改第一个
      // // keywordEls[0].style.color = "red"
      // // 修改所有的
      // for (var i = 0; i < keywordEls.length; i++) {
      //   keywordEls[i].style.color = "red"
      // }

      // 2. 通过id获取元素
      // var titleEl = document.getElementById("title")
      // titleEl.style.color = "orange"

      // 三.querySelector: 通过选择器查询
      var keywordEl = document.querySelector(".keyword");
      // keywordEls是对象, 可迭代的
      // 可迭代对象: String/数组/节点的列表 使用for/of
      var keywordEls = document.querySelectorAll(".keyword");
      console.log(keywordEls); //不是一个数组 是一个类数组对象
      // for/in for/of 循环
      for (var el of keywordEls) {
        el.style.color = "red";
      }
      console.log(keywordEls);

      var titleEl = document.querySelector("#title");
      titleEl.style.color = "orange";

      // querySelector querySelectorAll 支持通过元素调用
      // getElementById getElementsByClassName 不支持通过元素调用
    </script>
  </body>
</html>
